largeurCase = 40;
hauteurCase = 40;

var XHR = function(method, ad, params) {
    var xhr = new XMLHttpRequest();
    xhr.onload = params.onload || null;
    xhr.open(method, ad);
    if (method === 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    var variables = params.variables || null
            , str = '';
    for (var i in variables) {
        str += i + '=' + encodeURIComponent(variables[i]) + '&';
    }
    xhr.send(str);
};

var socket;

function click() {
    id = event.target.getAttribute('id');
    if (id === 'rred') {
        emitElement({elem: 'robot', color: 'red'});
    }
    if (id === 'rblue') {
        emitElement({elem: 'robot', color: 'blue'});
    }
    if (id === 'rgreen') {
        emitElement({elem: 'robot', color: 'green'});
    }
    if (id === 'ryellow') {
        emitElement({elem: 'robot', color: 'yellow'});
    }
    if (id === 'tred') {
        emitElement({elem: 'target', color: 'red'});
    }
    if (id === 'tblue') {
        emitElement({elem: 'target', color: 'blue'});
    }
    if (id === 'tgreen') {
        emitElement({elem: 'target', color: 'green'});
    }
    if (id === 'tyellow') {
        emitElement({elem: 'target', color: 'yellow'});
    }
    caseShadow(id);
}

function emitElement(element) {
    element.idGame = document.getElementById('idGame').value;
    console.log(element);
    socket.emit('elementSelect', element);
}



function init() {
    // Connect to the SocketIO server to retrieve ongoing games.
    socket = io.connect();

    var img;
    caseRobot('rred', 'red');
    caseRobot('rblue', 'blue');
    caseRobot('rgreen', 'green');
    caseRobot('ryellow', 'yellow');

    img = document.getElementById('rred');
    img.addEventListener('click', click, false);
    img = document.getElementById('rblue');
    img.addEventListener('click', click, false);
    img = document.getElementById('rgreen');
    img.addEventListener('click', click, false);
    img = document.getElementById('ryellow');
    img.addEventListener('click', click, false);
}

function caseTarget(element, color) {
    divCase = $(element);
    divCase.addClass('T' + color);

    var ctx = divCase[0].getContext('2d');
    ctx.beginPath();
    ctx.arc((largeurCase / 2), (hauteurCase / 2), ((largeurCase / 2) - 4), 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();

    var ctx = divCase[0].getContext('2d');
    ctx.beginPath();
    ctx.arc((largeurCase / 2), (hauteurCase / 2), ((largeurCase / 4) - 4), 0, 2 * Math.PI);
    ctx.fillStyle = '#000000';
    ctx.fill();
}

function caseShadow(id) {
    divCase = $('canvas.roboselectlarge');
    divCase.removeClass('roboselectlarge');
    divCase = $('canvas#' + id);
    divCase.addClass('roboselectlarge');
}

function caseRobot(id, color) {
    divCase = $('canvas#' + id);
    divCase.addClass('R' + color);
    var ctx = divCase[0].getContext('2d');
    var img = new Image();

    switch (color)
    {
        case 'blue':
            img.src = 'img/BlueLarge.png';
            break;
        case 'yellow':
            img.src = 'img/YellowLarge.png';
            break;
        case 'green':
            img.src = 'img/GreenLarge.png';
            break;
        case 'red':
            img.src = 'img/RedLarge.png';
            break;
    }
    img.onload = function() {
        ctx.drawImage(img, (largeurCase / 2) - 15, 0);
        ctx.beginPath();
        ctx.stroke();
    }
}

function getQueryStringParam(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
    return null;
}

function autoPalette() {
    var idGame = getQueryStringParam('idGame');
    if (idGame !== null) {
        $('.container').css('display', 'none');
        $('#autoPalette').val(idGame);
        $('#autoPaletteForm').submit();
    }
}



